<template>
    <div class="jianzhan-content">
        <Crumb :name="$t('serviceEquipment.equipment')"/>
        <div class="content">
            <Search>
                <el-button icon="el-icon-plus" type="primary" size="small" class="input" @click="
                                        clear()
                                        dialogVisible = true
                                    ">{{$t('serviceEquipment.addEquipment')}}
                </el-button>
                <label
                        for="uploadFile"
                        class="label">{{$t('upload')}} <i class="el-icon-upload"></i></label>
                <input type="file" @change="fileChange" id="uploadFile" v-show="false">
                <el-button type="info" size="small" style="margin-left: 20px;" icon="el-icon-download" @click="downloadTemp">{{$t('downloadTemplate')}}</el-button>
                <el-button type="info" size="small" style="margin-left: 20px;" icon="el-icon-download" @click="downloadFile">{{$t('download')}}</el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        @filter-change="filterChange"
                        row-key="id"
                        border
                        stripe
                >
                    <el-table-column
                            column-key="belongCompany"
                            prop="belongCompany"
                            :label="$t('serviceEquipment.company')"
                            :filters="belongCompanyFilter"
                    ></el-table-column>
                    <el-table-column prop="brand"
                                     column-key="brand"
                                     :filters="brandFilter"
                                     :label="$t('serviceEquipment.brand')"
                                     ></el-table-column>
                    <el-table-column prop="contract"
                                     column-key="contract"
                                     :filters="contractFilter"
                                     :label="$t('serviceEquipment.contractNo')"
                                     ></el-table-column>
                    <el-table-column prop="arrieveDateStr"
                                     column-key="arrieveDateStr"
                                     :filters="arrieveDateStrFilter"
                                     :label="$t('serviceEquipment.deliveryDate')"
                                     ></el-table-column>
                    <el-table-column prop="engine"
                                     column-key="engine"
                                     :filters="engineFilter"
                                     :label="$t('serviceEquipment.engine')"
                    <el-table-column prop="engineType"
                                     column-key="engineType"
                                     :label="$t('serviceEquipment.engineType')"
                                     ></el-table-column>
                    <el-table-column prop="equipmentType"
                                     column-key="equipmentType"
                                     :filters="equipmentTypeFilter"
                                     :label="$t('serviceEquipment.equipmentType')"
                                     ></el-table-column>
                    <el-table-column prop="model"
                                     column-key="model"
                                     :filters="modelFilter"
                                     :label="$t('serviceEquipment.model')">
                    </el-table-column>
                    <el-table-column prop="plateNum"
                                     :label="$t('serviceEquipment.plateNum')">
                    </el-table-column>
                    <el-table-column prop="sn"
                                     :label="$t('serviceEquipment.sn')"
                                     ></el-table-column>
                    <!--<el-table-column prop="project"-->
                    <!--label="Project"/>-->
                    <el-table-column :label="$t('operate')" width="220">
                        <template slot-scope="equipment">
                            <el-button size="small" type="text" @click="openDialog(equipment.row)">{{$t('modify')}}</el-button>
                            <el-button size="small" type="text" @click="deleteEquipment(equipment.row)">{{$t('delete')}}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination
                            background
                            :page-size="pageSize"
                            @current-change="changePage"
                            layout="prev, pager, next"
                            :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" title="Equipment" width="80%">
            <el-form label-width="150px">
                <!--<el-form-item label="Service Num">-->
                    <!--<el-input class="my-input" v-model="equipment.serviceNum"/>-->
                <!--</el-form-item>-->
                <el-form-item :label="$t('serviceEquipment.deliveryDate')">
                    <el-date-picker class="my-input" size="small" v-model="equipment.arrieveDateStr"
                                    value-format="yyyy-MM-dd"/>
                </el-form-item>
                <el-form-item :label="$t('serviceEquipment.contract')">
                    <el-input v-model="equipment.contract" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item :label="$t('serviceEquipment.equipmentType')">
                    <el-input v-model="equipment.equipmentType" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item :label="$t('serviceEquipment.brand')">
                    <el-input v-model="equipment.brand" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item :label="$t('serviceEquipment.vnSn')">
                    <el-input v-model="equipment.sn" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item :label="$t('serviceEquipment.engine')">
                    <el-input v-model="equipment.engine" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item :label="$t('serviceEquipment.engineType')">
                    <el-input v-model="equipment.engineType" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item :label="$t('serviceEquipment.model')">
                    <el-input v-model="equipment.model" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item :label="$t('serviceEquipment.belongCompany')">
                    <el-select filterable v-model="equipment.belongCompany" placeholder="Company" size="small"
                               class="my-input">
                        <el-option
                                v-for="item in customerList"
                                :key="item.id"
                                :label="item.customerName"
                                :value="item.customerName">
                        </el-option>
                    </el-select>
                    <!--<el-input v-model="equipment.belongCompany" size="small" class="my-input"/>-->
                </el-form-item>
                <el-form-item :label="$t('serviceEquipment.plateNum')">
                    <el-input v-model="equipment.plateNum" size="small" class="my-input"/>
                </el-form-item>
                <el-form-item :label="$t('serviceEquipment.project')" >
                    <el-input v-model="equipment.project" size="small" placeholder="Project"
                              class="my-input"></el-input>
                    <!--<el-select v-model="equipment.projectId" size="small" class="my-input">-->
                    <!--<el-option v-for="item in projectList" :key="item.id" :value="item.id" :label="item.projectName"/>-->
                    <!--</el-select>-->
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
                        <el-button type="primary" @click="submitForm">{{$t('confirm')}}</el-button>
                    </span>
        </el-dialog>

    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import Search from '../../components/common/search'
    import {
        getEquipment,
        getProject,
        addEquipment,
        modEquipment,
        deleteEquipment,
        uploadEquipment
    } from "../../api/service";
    import {getCustomerList} from "../../api";
    import mixins from '../../util/mixins'
    import {ERROR_OK} from "../../util/config";
    import {arrayUnique, baseURL} from "../../util";


    export default {
        name: "equipment",
        mixins: [mixins],
        data() {
            return {
                belongCompanyFilter: [],
                brandFilter: [],
                contractFilter: [],
                arrieveDateStrFilter: [],
                engineFilter: [],
                equipmentTypeFilter: [],
                modelFilter: [],
                equipmentList: [],
                customerList: [],
                projectList: [],
                dialogVisible: false,
                originData:[],
                filterOption:{},
                equipment: {
                    serviceNum: '',
                    arrieveDateStr: '',
                    contract: '',
                    equipmentType: '',
                    brand: '',
                    sn: "",
                    engine: '',
                    engineType: '',
                    model: '',
                    belongCompany: '',
                    plateNum: '',
                    projectId: ''

                }
            }
        },
        computed:{
            list(){
                let tableData = [];
                if(!Object.keys(this.filterOption).length){
                    return this.originData
                }
                Object.keys(this.filterOption).forEach(filter=>{
                    tableData = this.originData.filter(data=>{
                        return this.filterOption[filter].every(f =>{
                            return data[filter].indexOf(f)>-1
                        })
                    })
                });
                return  tableData
            }
        },
        created() {
            this.getCustomerList();
            this.getEquipment();
            this.getProject();
        },
        methods: {
            filterChange(a) {
                this.filterOption = a;
            },
            downloadFile(){
                window.open(baseURL+'/service/export_equipment.file')
            },
            downloadTemp(){
                window.open('http://cdn.ayotrust.com/upload/2020-01-06/13/设备模版.xlsx');
            },
            async fileChange(e) {
                const formData = new FormData();
                Array.prototype.forEach.call(e.target.files, item => {
                    formData.append('exFiles', item);
                });
                const {status,msg} = await uploadEquipment(formData);
                if (status === ERROR_OK) {
                   this.getEquipment();
                   this.$message.success("Upload Success")
                } else {
                    this.$message.error(msg)
                }
                e.target.value = ''
            },
            hanldleFilter(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            async getCustomerList() {
                const {status, data} = await getCustomerList();
                if (status === ERROR_OK) {
                    this.customerList = data;
                }
            },
            async deleteEquipment(equipment) {
                this.$confirm(
                    'Do you want to delete this equipment?'
                ).then(async () => {
                    const {status} = await deleteEquipment(equipment.id);
                    if (status === ERROR_OK) {
                        const id = this.equipmentList.findIndex(item => item.id === equipment.id);
                        this.equipmentList.splice(id, 1);
                    }
                }).catch(() => {
                })
            },
            async submitForm() {
                const {
                    serviceNum,
                    arrieveDateStr,
                    contract,
                    equipmentType,
                    brand,
                    sn,
                    engine,
                    engineType,
                    model,
                    belongCompany,
                    plateNum,
                    project,
                    id
                } = this.equipment;
                if (id) {
                    const {status} = await modEquipment({
                        serviceNum,
                        arrieveDateStr,
                        contract,
                        equipmentType,
                        brand,
                        sn,
                        engine,
                        engineType,
                        model,
                        belongCompany,
                        plateNum,
                        project,
                        id
                    });
                    if (status === ERROR_OK) {
                        this.$notify.success('Modify successfully');
                    } else {
                        this.$notify.error('Please Retry')
                    }
                    this.clear();
                    this.dialogVisible = false
                } else {
                    const {status} = await addEquipment({
                        serviceNum,
                        arrieveDateStr,
                        contract,
                        equipmentType,
                        brand,
                        sn,
                        engine,
                        engineType,
                        model,
                        belongCompany,
                        plateNum,
                        project
                    })
                    if (status === ERROR_OK) {
                        this.$notify.success('Add successfully');
                        this.getEquipment()
                    } else {
                        this.$notify.error('Please Retry')
                    }
                    this.clear();
                    this.dialogVisible = false
                }
            },
            async getEquipment() {
                const {status, data} = await getEquipment();
                if (status === ERROR_OK) {
                    this.equipmentList = data.reverse();
                    this.originData = data.reverse();
                    ['belongCompany', 'brand', 'contract', 'arrieveDateStr', 'engine', 'equipmentType', 'model'].forEach(item => {
                        this[item + 'Filter'] = arrayUnique(data.map(e => {
                            return e[item]
                        })).map(i => {
                            return {
                                text: i,
                                value: i
                            }
                        })
                    });
                    this.total = data.length
                } else {
                    this.$notify.warning('No data');
                    this.equipmentList = []
                }
            },
            async getProject() {
                const {status, data} = await getProject();
                if (status === ERROR_OK) {
                    this.projectList = data;
                }
            },
            clear() {
                this.equipment = {
                    serviceNum: '',
                    arrieveDateStr: '',
                    contract: '',
                    equipmentType: '',
                    brand: '',
                    sn: "",
                    engine: '',
                    engineType:'',
                    model: '',
                    belongCompany: '',
                    plateNum: '',
                    projectId: '',
                    id: ''

                }
            },
            openDialog(item) {
                this.equipment = item;
                this.dialogVisible = true
            },
            download() {
                window.open(baseURL + `/statistical_report/export_excel.do?years=${this.years}&months=${this.months}`);
            }
        },
        watch:{
            list(list){
                this.total = list.length
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .label{
        width: 200px;
        display: inline-block;
        height: 32px;
        line-height: 30px;
        background: #409EFF;
        color: white;
        text-align: center;
        vertical-align: top;
        border-radius: 3px;
        cursor: pointer;
    }
    .content {
        @include content
    }
</style>